<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../js/vue.min.js"></script>
	</head>
	<body>
		<div id="root">
			<Myapp></Myapp>
		</div>
		<script type="text/javascript">
			
			// 定义 hello 组件 
			const hello = Vue.extend({
				template: `
					<div>
						<span style="background-color: aqua;">{{msg}}</span>
					</div>
				`,
				data() {
					return {
						msg: 'HelloWorld'
					}
				}
			})
			// 定义 student 组件
			const student = Vue.extend({
				template: `
					<div>
						<hello></hello>
						<h1>学生姓名：{{name}}</h1>
						<h2>学号：{{number}}</h1>
						<button @click="alertName">点击弹出学生姓名</button>
					</div>
				`,
				data() {
					return {
						name: '张三',
						number: '20230001'
					}
				},
				methods: {
					alertName() {
						alert('学生姓名：',name)
					}
				},
				// 局部注册hello组件
				components: {
					hello
				}
			})
			
			// 定义 school 组件 
			const school = Vue.extend({
				template:`
					<div>
						<student></student>
						<h1>学校名称：{{name}}</h1>
						<h2>学校地址：{{address}}</h1>
						<button @click="showInfo">点击提示学习信息</button>
					</div>
				`,
				// data 必须要写成函数，且不能是箭头函数
				data() {
					return {
						name: '清华大学',
						address: '北京'
					}
				},
				methods: {
					showInfo() {
						console.log('学校名称：',this.name,'地址：',this.address)
					}
				},
				// 局部注册 student 组件
				components: {
					student
				}
			})
			// 定义 app 组件
			const app = Vue.extend({
				template: `
					<div>
						<h1>{{appName}}</h1>
						<school></school>
					</div>
				`,
				data() {
					return {
						appName: '学校管理'
					}
				},
				// 注册school组件
				components: {
					school
				}
			})
			
			// 全局注册app组件
			// 注意，组件名称为一个单次，要么全部小写，要么首字母大写其他小写
			Vue.component('Myapp',app)
			// 创建vue实例
			const vm = new Vue({
				el: '#root'
			})
		</script>
	</body>
</html>